<script setup lang="ts">
import { reactive, ref, onMounted, watch } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";

import { vulScan } from "@/api/task";
import { message } from "@/utils/message";
import { copyTextToClipboard } from "@pureadmin/utils";
defineOptions({
  name: "Vulnerability",
});

const route = useRoute();
const formInline = reactive({
  vuln_app: "",
  vuln_name: "",
  risk_level: "",
});

const addTaskFormRef = ref<FormInstance>();

const hardwareRules = reactive<FormRules>({
  taskName: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
});

const showAddHardwareDialog = ref(false);

const tableData = ref([]);

const currentPage = ref(1); // 当前页码
const pageSize = ref(20); // 每页显示的条数
const totalTabalData = ref(0); // 总条数
const jobId = ref("123"); // 总条数

const getVulScan = () => {
  vulScan({
    job_id: jobId.value,
    per_page: pageSize.value,
    page: currentPage.value,
    vuln_app: formInline.vuln_app,
    vuln_name: formInline.vuln_name,
  }).then((res) => {
    if (res.code === 2000) {
      tableData.value = res.data;
      totalTabalData.value = res.total;
    }
  });
};

//复制资产
const copyAsset = (params, type) => {
  const success = copyTextToClipboard(params.row.department);
  message("复制成功", { type: "success" });
};

watch(showAddHardwareDialog, (newVal, oldVal) => {
  // resetAddTaskForm();
});

onMounted(() => {
  console.log(route.query.jobid);
  const jobid = route.query.jobid;
  jobId.value = jobid as string;
  getVulScan();
});
</script>

<template>
  <div>
    <div class="">
      <div class="card-header">
        <el-form
          :inline="true"
          :model="formInline"
          size="small"
          class="demo-form-inline"
          @submit.prevent
        >
          <el-form-item label="应用名称">
            <el-input
              v-model="formInline.vuln_app"
              placeholder="应用名称"
              maxlength="30"
              clearable
              @keydown.enter="getVulScan"
            >
              <template #append>
                <el-button :icon="Search" @click="getVulScan" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="漏洞名称">
            <el-input
              v-model="formInline.vuln_name"
              placeholder="漏洞名称"
              maxlength="30"
              clearable
              @keydown.enter="getVulScan"
            >
              <template #append>
                <el-button :icon="Search" @click="getVulScan" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="端口" v-if="false">
            <el-input
              v-model="formInline.port"
              placeholder="端口"
              maxlength="30"
              clearable
              @keydown.enter="getVulScan"
            >
              <template #append>
                <el-button :icon="Search" @click="getVulScan" />
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="报备状态" v-if="false">
            <el-select
              v-model="formInline.department"
              placeholder="请选择"
              @change="getVulScan"
            >
              <el-option label="已报备" value="0" />
              <el-option label="未报备" value="1" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="test">下载</el-button>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="test">添加</el-button>
          </el-form-item> -->
        </el-form>
      </div>

      <el-table :data="tableData" style="width: 100%">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column width="80" label="ID" prop="id" />
        <el-table-column label="脆弱性应用" prop="vuln_app" />
        <el-table-column label="漏洞名称" prop="vuln_name" />
        <el-table-column label="漏洞地址" prop="vuln_address">
          <template #default="rowscope">
            <div>
              <el-link
                type="primary"
                :underline="true"
                :href="rowscope.row.vuln_address"
                >{{ rowscope.row.vuln_address }}</el-link
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否自有" prop="is_owned">
          <template #default="rowscope">
            <div>
              {{ rowscope.row.is_owned == true ? "是" : "否" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="危害等级" prop="risk_level" />
        <el-table-column
          label="关联部门"
          prop="related_department"
          width="200"
          show-overflow-tooltip
        />

        <el-table-column label="漏洞详情" prop="vuln_detail" />

        <el-table-column label="" v-if="false">
          <template #default="rowscope">
            <div>
              <el-link
                type="primary"
                :underline="true"
                @click="copyAsset(rowscope, 'normal')"
                >复制</el-link
              >
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="rowscope">
            <el-button size="small" type="primary"> 编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @current-change="getVulScan"
        v-model:current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        v-model:page-size="pageSize"
        @size-change="getVulScan"
        layout="total, sizes, prev, pager,next"
        :total="totalTabalData"
        background
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card__header) {
}

:deep(.el-pagination) {
  justify-content: right;
  margin-top: 10px;
  margin-right: 30px;
}
.gather-container {
  display: block;
  margin-bottom: 10px;
}

.min-w-input {
  width: 300px;
}

.el-btn-zese {
  background: #722ed1;
  color: white;
  border-color: #722ed1;
}

.el-btn-zese.is-disabled,
.el-btn-zese.is-disabled:focus,
.el-btn-zese.is-disabled:hover {
  background: #722ed1;
  color: white;
  border-color: #722ed1;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
